<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册界面</title>
		<link rel="stylesheet" href="css/style.css" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<!-- jquery -->
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- jQuery Cookie 插件在线地址用于方便获取cookie的值 -->
		<!-- <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> -->
		<script src="js/jquery-cookie.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var isOff = true;

			function swimg() {
				const sw = document.getElementById("view");
				const txt = document.getElementById("password");
				const txtAgain = document.getElementById("confirmPassword");
				if (isOff) {
					sw.src = "img/view.png";
					txt.type = "number";
					txtAgain.type = "number";
					isOff = false;
				} else {
					sw.src = "img/view_off.png";
					txt.type = "password";
					txtAgain.type = "password";
					isOff = true;
				}
			}

			//onblur:鼠标焦点开编辑框时触发
			// document.querySelector('input').onblur = function () {
			// 	var xhr = new XMLHttpRequest();
			// 	xhr.open('POST','doRegister.php');
			// 	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			// 	//注册回调函数
			// 	xhr.onload = function(){

			// 	}
			// 	xhr.send('');
			// }
		</script>

	</head>
	<body style="background-image: url(img/body_img.jpg);">
		<div id="bigBox">
			<h2>注册</h2>

			<div class="inputBox">
				<div class="inputText">
					<img class="password-img" src="img/user.png" />
					<input type="text" name="user" v-model="inputName" maxlength="10" placehoder="请输入账号/2-10个字符">
				</div>
				<div class="inputText">
					<img class="password-img" src="img/password.png" />
					<img class="view" id="view" src="img/view_off.png" onclick="swimg()" />
					<input type="password" id="password" v-model="inputPasw" name="password" maxlength="8" placehoder="请输入密码/6-16位">
					<input type="password" id="confirmPassword" v-model="inputAge" maxlength="16" placehoder="确认密码">

					
				</div>
				<img class="confirmPassword-img" src="img/confirmPassword.png" />

				<input type="button" value='注册账号' @click="register" class="inputButton">
				<br />
				<span><a href="login.html">已有账号?马上登录</a></span>
			</div>

		</div>
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#bigBox',
			data: {
				inputName: '',
				inputPasw: '',
				inputAge: '',

			},
			methods: {
				register: function() {
					if (this.inputName.length >= 2 && this.inputPasw.length >= 6) {
						if (this.inputPasw == this.inputAge) {
							axios.get('php/doRegister.php', {
								params: {
									user: this.inputName,
									password: this.inputPasw,
								}
							}).then(rsponse => {
								var re = rsponse.data;
								if (re == '1') {
									alert('注册成功');
									window.location.href = 'login.html';
								}
								else if (re = '0') {
									alert('用户名已经被注册');
								}
								else if (re == '-1') {
									alert('注册是失败,请再试有一次');
								}
							})
						} else {
							alert('密码不一致');
						}
					} else {
						alert('用户名不得少于2个字/密码不得少于6个符');
					}

				}
			}
		})
	</script>
</html>
